<template>
  <div>
    <div class="pay_top">
      <mt-header title="">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
      <mt-navbar v-model="selected">
        <mt-tab-item id="1" style="color:#fff;font-weight:bold;">配送</mt-tab-item>
        <mt-tab-item id="2" style="color:#fff;font-weight:bold">自取</mt-tab-item>
      </mt-navbar>
    </div>

    <mt-tab-container v-model="selected" style="margin-top:1.4rem">
      <mt-tab-container-item id="1">
        <div class="detail_content">
          <div class="detail_addr" @click="goAddr" v-if="psaddress">
            <p>{{psaddress}}</p>
            <p>{{psname}}&nbsp;&nbsp;{{psphone}}<i class="iconfont icon-you"></i></p>
          </div>
          <div class="detail_addr" @click="goAddr" v-else>
            <p style="font-weight:normal;text-align:center;font-size:0.3rem">新增收货地址<i class="iconfont icon-you"></i></p>
          </div>
          <div class="detail_food">
            <p>商品信息</p>
            <ul>
              <li v-for="(item,index) in payProlist" :key="item.id">
                <span>{{index+1}}.{{item.hash.pname}}{{item.hash.fromat}}({{item.hash.tastename}})</span>
                <span>*{{item.hash.number}}</span>
                <span>￥{{item.hash.price*item.hash.number}}</span>
                <span>配菜：{{item.hash.fixingname}}</span>
              </li>
            </ul>
            <p>
              <span style="color:#26a2ff"></span>
              <span>总计￥<i style="color:#f60;font-size:0.35rem">{{total}}</i></span>
            </p>
          </div>
          <div class="detail_ordermes">
            <p>订单备注</p>
            <p>
              <input type="text" placeholder="填写备注信息" v-model="remarks">
            </p>
          </div>
          <div class="detail_pay">
            <span>￥<i style="color:#fff">{{total}}</i></span>
            <span v-if="psaddress" @click="payMoney">立即下单</span><span v-else style="background:#ccc">请选择地址</span>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="detail_content">
          <div class="detail_addr">
            <p>{{zitischool}}</p>
            <p class="adr"><v-select v-model="local" :options="ziti"></v-select></p>
          </div>
          <div class="detail_ordermes">
            <p style="font-weight:normal" @click="showtime">
              自提时间&nbsp;&nbsp;&nbsp;&nbsp;：<input type="text" v-model="zitiTime" readonly placeholder="请选择自提时间"
                style="color:#f60"
              >
            </p>
            <p>预留手机号：<input type="number" placeholder="请输入手机号"
              style="color:#f60"
            ></p>
          </div>
          <div class="detail_food">
            <p>商品信息</p>
            <ul>
              <li v-for="(item,index) in payProlist" :key="item.id">
                <span>{{index+1}}.{{item.hash.pname}}{{item.hash.fromat}}({{item.hash.tastename}})</span>
                <span>*{{item.hash.number}}</span>
                <span>￥{{item.hash.price*item.hash.number}}</span>
                <span>配菜：{{item.hash.fixingname}}</span>
              </li>
            </ul>
            <p>
              <span style="color:#26a2ff"></span>
              <span>总计￥<i style="color:#f60;font-size:0.35rem">{{total}}</i></span>
            </p>
          </div>
          <div class="detail_ordermes" style="margin-bottom:1rem">
            <p>订单备注</p>
            <p>
              <input type="text" placeholder="填写备注信息" v-model="remarks">
            </p>
          </div>
          <div class="detail_pay">
            <span>￥<i style="color:#fff">{{total}}</i></span>
            <span v-if="this.local" @click="payMoney">立即下单</span><span v-else style="background:#ccc">请选择自取点</span>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-datetime-picker
      ref="picker"
      type="time"
      v-model="pickerValue"
    >
    </mt-datetime-picker>
  </div>


</template>

<script>
import Vue from 'vue';
import vSelect from 'vue-select';

Vue.component('v-select', vSelect);
export default {
  data() {
    return {
      zitiTime: '',
      selected: '1',
      payProlist: [],
      addrList: {},
      zitischool: this.$route.query.schoolname,
      ziti: [],
      local: '',
      schoollist2: {},
      ts: this.newStore(),
      psname: '',
      psaddress: '',
      psphone: '',
      psid: '',
      remarks: '',
    };
  },
  created() {
    this.getZtlist();
    this.getPaypro();
    this.getLocation();
  },
  computed: {
    total() {
      let totalMoney = 0;
      for (let i = 0; i < this.payProlist.length; i += 1) {
        totalMoney += this.payProlist[i].hash.price * this.payProlist[i].hash.number;
      }
      return totalMoney;
    },
  },
  methods: {
    goAddr() {
      this.$router.push('chooseAddress');
    },
    showtime() {
      this.$refs.picker.open();
    },
    getZtlist() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2DE4A15B9858851EA9',
        schoolid: this.$route.query.schoolid,
        schoolname: '',
        status: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.ziti = [];
        for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
          this.ziti.push(ts.d.data.operation1[i].hash.pickname);
          this.schoollist2[ts.d.data.operation1[i].hash.pickname] = ts.d.data.operation1[i].hash.pickid;
        }
        this.local = this.ziti[0];
      });
    },
    getPaypro() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D4BA9CD20F695BCB66E8029E0F9076880',
        schoolid: this.$route.query.schoolid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.payProlist = ts.d.data.operation1;
      });
    },
    getLocation() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D43BC8DFD3F92B0DEECF4ABF3B9302723',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
          if (ts.d.data.operation1[i].hash.ismain == 1) {
            this.addrList = ts.d.data.operation1[i];
            this.psaddress = this.addrList.hash.address;
            this.psname = this.addrList.hash.name;
            this.psphone = this.addrList.hash.phone;
            this.psid = this.addrList.hash.id;
          }
        }
      });
    },
    payMoney() {
      const res1 = {
        handle: '1E8254760FECAC00839BD73D1C4F9A65CE20A440A62C4EBE3990164BA5528571338C0E01082A5616',
        schoolid: this.$route.query.schoolid,
        pickid: '',
        addressid: this.psid,
        remarks: this.remarks,
      };
      const res2 = {
        handle: '1E8254760FECAC00839BD73D1C4F9A65CE20A440A62C4EBE3990164BA5528571338C0E01082A5616',
        schoolid: this.$route.query.schoolid,
        pickid: this.schoollist2[this.local],
        addressid: '0',
        remarks: this.remarks,
      };

      if (this.selected == 1) {
        this.spost(this.ts, '/mainservlet', res1).then((ts) => {
          console.log(ts.d);
        });
      } else {
        this.spost(this.ts, '/mainservlet', res2).then((ts) => {
          console.log(ts.d);
        });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.mint-datetime
  width 100%
.pay_top
  position fixed
  z-index 999
  width 100%
  top 0
.mint-tab-item-label
  font-size 14px
.mint-navbar .mint-tab-item
  padding 0.2rem 0
.mint-navbar .mint-tab-item.is-selected
  margin 0
  border none
  border-bottom 3px solid #fff
  margin-bottom 0.1rem
.mint-navbar
  background #26a2ff
  color #fff
  margin-top -1px
  margin-bottom -1px
.detail_content
  height 100%
  background: -webkit-gradient(linear, 0 30%, 0 80%, from(#26a2ff), to(#fff));
  div
    margin-bottom 0.2rem

.detail_food
  padding 0.1rem 0.2rem
  background #fff
  width 96%
  margin 0 auto
  box-shadow 1px 1px 1px 1px #ccc
  p
    height 0.6rem
    line-height 0.6rem
    &:nth-child(1)
      font-weight bold
      border-bottom 1px solid #f1f1f1
    span
      &:nth-child(2)
        float right
  ul
    li
      line-height 0.5rem
      padding-bottom 0.1rem
      span
        display inline-block
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        &:nth-child(1)
          float left
          overflow: hidden;
          width 60%
        &:nth-child(2)
          max-width 20%
        &:nth-child(3)
          max-width 20%
          float right
.detail_ordermes
  padding 0.1rem 0.2rem
  background #fff
  width 96%
  margin 0 auto
  box-shadow 1px 1px 1px 1px #ccc
  p
    height 0.6rem
    line-height 0.6rem

    &:nth-child(1)
      font-weight bold
      border-bottom 1px solid #f1f1f1
    span
      &:nth-child(2)
        float right
.detail_addr
  padding 0.1rem 0.2rem
  background #26a2ff
  p
    height 0.6rem
    line-height 0.6rem

    &:nth-child(1)
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      font-weight bold
      font-size 0.35rem
      color #fff
    &:nth-child(2)
      color #fff
      i
        float right
        font-weight bold
        font-size 0.4rem
    span
      &:nth-child(2)
        float right
.detail_pay
  position fixed
  bottom -0.2rem
  width 100%
  height 0.8rem
  line-height 0.8rem
  background #26a2ff
  color #fff
  span
    float left
    display inline-block
    &:first-child
      width 70%
      padding-left 0.2rem
      font-size 0.4rem
    &:last-child
      width 30%
      text-align center
      background #e5c01d
.noadr
  background #ccc
.adr
  margin 0.1rem 0 0
  background #fff
  border-radius 4px
  div
    margin-bottom 0
</style>

